<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="Content-Language" content="zh-CN"/>
  <title>抽奖</title>
  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="./list.js"></script>
  <style type="text/css">
    body {text-align:center;padding-top:50px;}
	#Result {border:3px solid #40AA53;margin:0 auto;text-align:center;width:60%;padding:50px 0;background:#efe;}
	#ResultNum {font-weight:bold;font-size:120pt;font-family:Verdana}
	#Button {margin:50px 0 0 0;}
	#Button input {font-size:40px;padding:0 50px;}
  .List {margin: 20px 100px;text-align: center;}
  #ListSpan {margin: 10px 200px;width: 60%;}
  .footer {position:fixed;bottom:10px;right:50px;font:bold large monospace; }
  </style>
  <script type='text/javascript'>
  <!--
  var g_Interval = 100;
  var candidates = $(list);
  var g_Count = candidates.length;
  var g_Timer;
  var running = false;
  var num = 0;
  var index = 1;
  function beginRndNum(trigger){
  	if(running){
		  running = false;
		  clearTimeout(g_Timer);		
    	$(trigger).val("开始");
		  $('#ResultNum').css('color','red');
      $('#ListSpan').append(index + '&nbsp:' +candidates[num] + '&nbsp;&nbsp;&nbsp;');
      index++;
      if(candidates.length>1){
        candidates.splice(num,1);
      }
	 }
	 else{
		running = true;
		$('#ResultNum').css('color','black');
    	$(trigger).val("停止");
		beginTimer();
	 }
  }
  
  function updateRndNum(){
  	num = Math.floor(Math.random()*candidates.length);
  	$('#ResultNum').html(candidates[num]);
  }
  
  function beginTimer(){
    g_Timer = setTimeout(beat, g_Interval);
  }

  function beat() {
    g_Timer = setTimeout(beat, g_Interval);
    updateRndNum();
  }
  //-->

  $(document).keypress(function(event){
    if(event.keyCode==32){
      $('#StartBtn').click();
    } 
  });
  </script>
</head>
<body>
<h1 style="font-size: 60px; color: red;">品保部忘年会抽奖</h1>
<div id="Result">
	<span id="ResultNum"><span style="font-size:60pt;color:red;">祝您中奖！</span></span>
</div>
<div id="Button">
<input id="StartBtn" type='button' value='开始' onclick='beginRndNum(this)'/>
</div>
<div class="List">
<div id="ListSpan"></div>
</div>
<div class="footer">
  By SUM, 2014
</div>
</body>
</html>